<template>
	<div class="app">
		<h2>{{ message }}</h2>
		<input type="text" v-model="message">
	</div>
</template>

<script setup lang="ts" name="App">
/**
 * 	https://cn.vuejs.org/api/reactivity-advanced#customref
 *   自定义ref:  customRef  , 创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。
 * 
 * 
 */
// import { clearTimeout } from "timers";
import { ref, customRef, onMounted } from "vue";
import useMessageRef from "./hooks/useMessageRef";

// let message = ref('hello')



let { message } = useMessageRef('frank', 2000)

onMounted(() => {
	console.log(message)
})


// let initValue = '你好'
// let timer :number
// let message = customRef((track,trigger) => {
// 	return {
// 		// 何时调用？ message 被读取时 会被调用
// 		get() {
// 			console.log('get ....')
// 			//调用 track ，告诉Vue,  message 很重要，你要对message 进行持续关注，一旦 message 变化 就去更新
// 			track()
// 			return initValue
// 		},
// 		//何时调用？  message 被修改时 会被调用
// 		set(value) {
// 			clearTimeout(timer)
// 			timer = setTimeout(() => {
// 			console.log('set ', value)
// 			// 修改数据
// 			initValue = value

// 			// 最后调用 trigger, 通知Vue一下数据已经变化了
// 			trigger()
// 			}, 1000);
// 		}
// 	}
// })






</script>












<style scoped>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin: 0 5px;
}
</style>